<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!-- 搜索栏 -->
      <div style="display: flex; justify-content: left">
        <el-input
          v-model="searchList.battery_id"
          placeholder="请输入电池编号"
          style="width: 220px; margin-right: 20px"
          size="small"
          :clearable="true"
          @keyup.enter.native="searchFn"
        />
        <!--搜索与重置-->
        <div>
          <el-button
            class="filter-item"
            size="mini"
            type="success"
            icon="el-icon-search"
            @click="searchFn"
            >搜索</el-button
          >
          <el-button
            class="filter-item"
            size="mini"
            type="warning"
            icon="el-icon-refresh-left"
            @click="resetFn"
            >重置</el-button
          >
        </div>
      </div>

      <!-- 新增---导出 -->
      <!-- <div style="margin-top: 10px">
        <el-button
          class="filter-item"
          size="mini"
          type="primary"
          icon="el-icon-plus"
          @click="newFn"
        >
          新增
        </el-button>
      </div> -->
    </div>
    <!--Form分配电池表单-->
    <el-dialog :visible.sync="isBattery" :title="batteryTitle" width="450px">
      <el-form
        ref="batteryForm"
        :inline="false"
        :model="batteryList"
        :rules="batteryRules"
        size="medium"
        label-width="100px"
      >
        <el-form-item label="选择电池" label-width="110px" prop="battery_id">
          <el-select
            placeholder="请选择电池"
            :clearable="true"
            v-model="batteryList.battery_id"
            multiple
            style="width: 260px"
          >
            <el-option
              v-for="item in agentIdArr"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isBattery = false" type="text">取消</el-button>
        <el-button
          :loading="batteryLoading"
          type="primary"
          @click="batteryFn('batteryForm')"
          >确认</el-button
        >
      </div>
    </el-dialog>

    <!--Form解除电池表单-->
    <el-dialog
      :visible.sync="isDeleteBattery"
      :title="deleteBatteryTitle"
      width="450px"
    >
      <el-form
        ref="deleteBatteryForm"
        :inline="false"
        :model="deleteBatteryList"
        :rules="deleteBatteryRules"
        size="medium"
        label-width="100px"
      >
        <el-form-item label="电池编号" label-width="110px" prop="batteries_ids">
          <el-input
            placeholder="请输入电池编号,如有多个，请用逗号'，'隔开"
            v-model="deleteBatteryList.batteries_ids"
            type="textarea"
            :clearable="true"
            :rows="4"
            style="width: 260px"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isDeleteBattery = false" type="text">取消</el-button>
        <el-button
          :loading="deleteBatteryLoading"
          type="primary"
          @click="deleteBatteryFn('deleteBatteryForm')"
          >确认</el-button
        >
      </div>
    </el-dialog>

    <!--Form编辑表单-->
    <el-dialog :visible.sync="isEdit" :title="FormTitle" width="500px">
      <el-form
        ref="form"
        :inline="false"
        :model="formList"
        :rules="formRules"
        size="medium"
        label-width="100px"
      >
        <el-form-item label="站点ID" prop="id" v-if="false">
          <el-input
            v-model="formList.id"
            placeholder="请输入"
            style="width: 320px"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="站点名称" prop="station_name">
          <el-input
            v-model="formList.station_name"
            placeholder="请输入"
            style="width: 320px"
          />
        </el-form-item>
        <el-form-item label="详细地址" prop="addr">
          <el-input
            v-model="formList.addr"
            placeholder="请输入"
            style="width: 320px"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isEdit = false" type="text">取消</el-button>
        <el-button
          :loading="formLoading"
          type="primary"
          @click="editConfirmFn('form')"
          >确认</el-button
        >
      </div>
    </el-dialog>
    <!--表格渲染-->
    <el-table
      ref="table"
      :data="list"
      :header-cell-style="{ 'text-align': 'center', color: '#000' }"
      :cell-style="{ 'text-align': 'center' }"
      :highlight-current-row="false"
      :border="true"
      style="width: 100%"
      height="650"
    >
      <el-table-column
        :show-overflow-tooltip="true"
        prop="id"
        min-width="230"
        label="电池编号"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="gms_signal"
        label="gms信号强度"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="mileage"
        label="行驶公里(km)"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="v"
        label="总电压(V)"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="i"
        label="总电流(A)"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="soc"
        label="电量(%)"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="ah"
        label="容量(AH)"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="pcb_t"
        label="pcb板温度(℃)"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="cell_t"
        label="电芯温度(℃)"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="shell_t"
        label="外壳温度(℃)"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        prop="loop_sum"
        label="电池循环次数"
      />
      <!--  <el-table-column label="操作" width="150px" align="center">
        <template slot-scope="scope">
          <div @click="caozuoChangeFn(scope.row)">
            <el-dropdown trigger="click" @command="caozuoChange">
              <span
                class="el-dropdown-link"
                :class="scope.row.id == caozuolist.id ? 'blue' : ''"
              >
                {{ scope.row.id == caozuolist.id ? caozuolable : "操作" }}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a">分配电池</el-dropdown-item>
                <el-dropdown-item command="d">解除电池</el-dropdown-item>
                <el-dropdown-item command="b">编辑</el-dropdown-item>
                <el-dropdown-item command="c">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>

          
          <el-button
            size="mini"
            type="primary"
            style="color: #fff"
            @click="allocationBatteryFn(scope.row)"
            >分配电池</el-button
          >
          <el-button
            size="mini"
            type="primary"
            style="color: #fff"
            @click="compileFn(scope.row)"
            >编辑</el-button
          >

          <el-popover :ref="scope.row.id" placement="top" width="200">
            <p>确定删除该条数据？</p>
            <div style="text-align: right; margin: 0">
              <el-button
                size="mini"
                type="text"
                @click="$refs[scope.row.id].doClose()"
                >取消</el-button
              >
              <el-button
                :loading="delLoading"
                type="primary"
                size="mini"
                @click="delMethod(scope.row.id)"
                >确定</el-button
              >
            </div>
            <el-button
              slot="reference"
              type="danger "
              size="mini"
              style="color: #fff; margin-top: 5px"
              >删除</el-button
            >
          </el-popover>
        </template>
      </el-table-column> -->
    </el-table>
    <!-- 删除 -->
    <el-popover
      v-model="caozuoshanchu"
      placement="top"
      width="200"
      style="position: fixed; right: 48%; top: 12%"
    >
      <p>确定删除该条数据？</p>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="caozuoshanchu = false"
          >取消</el-button
        >
        <el-button
          :loading="delLoading"
          type="primary"
          size="mini"
          @click="quedingshanchuFn"
          >确定</el-button
        >
      </div>
    </el-popover>

    <!--分页组件-->
    <el-pagination
      :page-size.sync="page.size"
      :page-sizes="[5, 10, 20, 30, 50]"
      :total="page.total"
      :current-page.sync="page.page"
      style="margin-top: 8px"
      layout="total,sizes, prev, pager, next, jumper"
      @size-change="sizeChangeFn"
      @current-change="currentChangeFn"
    />
  </div>
</template>

<script>
import { urlObj } from "@/api/login";
export default {
  data() {
    return {
      // 操作下拉框  strat
      caozuolist: {},
      caozuolable: "操作",
      caozuoshanchu: false,
      // 操作下拉框  end
      searchList: {
        battery_id: "",
      }, // 搜索数据
      isEdit: false, //控制编辑表单打开与否
      FormTitle: "", //编辑表单标题
      formLoading: false, //编辑确认状态--加载与否
      formList: {
        //编辑表单数据
        id: "",
        station_name: "",
        addr: "",
      },
      formRules: {
        //编辑表单规则
        battery_id: [{ required: true, message: "请输入", trigger: "blur" }],
        station_name: [{ required: true, message: "请输入", trigger: "blur" }],
        addr: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      // 分配电池
      isBattery: false,
      batteryTitle: "给该站点分配商户电池", //分配电池表单标题
      batteryLoading: false, //分配电池确认状态--加载与否
      agentIdArr: [], //商户未绑定站点的电池
      batteryList: {
        //分配电池表单数据
        battery_id: "",
        station_id: "",
      },
      batteryRules: {
        //分配电池表单规则
        battery_id: [
          { required: true, message: "请选择电池", trigger: "change" },
        ],
      },
      // 解除电池
      isDeleteBattery: false,
      deleteBatteryTitle: "解除该站点的商户电池", //解除电池表单标题
      deleteBatteryLoading: false, //解除电池确认状态--加载与否
      deleteBatteryList: {
        //解除电池表单数据
        batteries_ids: "",
        merchant_id: "",
      },
      deleteBatteryRules: {
        //解除电池表单规则
        batteries_ids: [
          { required: true, message: "请输入电池", trigger: "change" },
        ],
      },
      list: [], //列表数据
      delLoading: false, //删除状态--加载与否
      page: {
        size: 10, //每页的数量
        page: 1, //当前页
        total: 0, //总数
      }, //分页
    };
  },
  mounted() {
    this.listFn();
    this.agentIdArrFn();
  },
  methods: {
    // 操作下拉框  strat
    caozuoChange(val) {
      if (val == "a") {
        this.caozuolable = "分配电池";
        this.allocationBatteryFn(this.caozuolist);
      }
      if (val == "b") {
        this.caozuolable = "编辑";
        this.compileFn(this.caozuolist);
      }
      if (val == "c") {
        this.caozuolable = "删除";
        this.caozuoshanchu = true;
      }
      if (val == "d") {
        this.caozuolable = "解除电池";
        this.deleteAllocationBatteryFn(this.caozuolist);
      }
    },
    // 拿到列表一行数据
    caozuoChangeFn(row) {
      this.caozuolist = row || {};
    },
    // 删除
    quedingshanchuFn() {
      this.caozuoshanchu = false;
      this.delMethod(this.caozuolist.id);
    },
    // 操作下拉框  end

    // 分页---每页的数量
    sizeChangeFn(val) {
      this.page.size = val;
      this.page.page = 1;
      this.listFn();
    },
    // 当前页数
    currentChangeFn(val) {
      this.page.pege = val;
      this.listFn();
    },
    // 重置
    resetFn() {
      this.searchList.battery_id = "";
      this.listFn();
      this.page.size = 10;
      this.page.page = 1;
    },
    // 搜索
    searchFn() {
      this.page.size = 10;
      this.page.page = 1;
      this.listFn();
    },
    // 新增
    newFn() {
      this.isEdit = true;
      this.FormTitle = "新增站点";
      this.formList.id = "";
      this.formList.station_name = "";
      this.formList.addr = "";
    },

    // 商户未绑定站点的电池列表
    agentIdArrFn() {
      let prarms = {
        func: "getNotBindBattery",
        token: JSON.parse(sessionStorage.getItem("userObj")).token || "",
      };
      urlObj(prarms).then((res) => {
        let data = res.result || [];
        this.agentIdArr = [];
        if (data.length !== 0) {
          data.forEach((i) => {
            let testAgentArr = {
              id: i.id,
              name: i.id,
            };
            this.agentIdArr.push(testAgentArr);
          });
        }
      });
    },
    // 列表分配电池按钮
    allocationBatteryFn(row) {
      this.isBattery = true;
      this.batteryList.station_id = row.id || "";
      this.batteryList.battery_id = "";
    },
    // 列表分配电池按钮 --确定
    batteryFn(val) {
      let prarms = {
        func: "setBatteryStation",
        token: JSON.parse(sessionStorage.getItem("userObj")).token || "",
        business: this.batteryList,
      };
      this.$refs[val].validate(async (valid) => {
        if (valid) {
          this.batteryLoading = true;
          urlObj(prarms)
            .then((res) => {
              this.listFn();
              this.$message({
                message: res.msg || "",
                type: res.code == 0 ? "success" : "error",
              });
            })
            .catch((error) => {
              this.$message({
                message: res.msg || "",
                type: "error",
              });
            });
          this.batteryLoading = false;
          this.isBattery = false;
        }
      });
    },
    // 列表解除电池按钮
    deleteAllocationBatteryFn(row) {
      this.isDeleteBattery = true;
      this.deleteBatteryList.merchant_id = row.id || "";
      this.deleteBatteryList.batteries_ids = "";
    },
    // 列表解除电池按钮 --确定
    deleteBatteryFn(val) {
      let batteries_ids = this.deleteBatteryList.batteries_ids;
      let batteries_idsList = [];
      if (batteries_ids.includes(",")) {
        batteries_idsList = batteries_ids.split(",");
      } else if (batteries_ids.includes("，")) {
        batteries_idsList = batteries_ids.split("，");
      } else {
        batteries_idsList = [batteries_ids];
      }
      let prarms = {
        func: "batteryUnbindStation",
        token: JSON.parse(sessionStorage.getItem("userObj")).token || "",
        business: {
          merchant_id: this.deleteBatteryList.merchant_id,
          batteries_ids: batteries_idsList || [],
        },
      };
      this.$refs[val].validate(async (valid) => {
        if (valid) {
          this.deleteBatteryLoading = true;
          urlObj(prarms)
            .then((res) => {
              this.listFn();
              this.$message({
                message: res.msg || "",
                type: res.code == 0 ? "success" : "error",
              });
            })
            .catch((error) => {
              this.$message({
                message: res.msg || "",
                type: "error",
              });
            });
          this.deleteBatteryLoading = false;
          this.isDeleteBattery = false;
        }
      });
    },

    // 列表编辑按钮
    compileFn(row) {
      this.isEdit = true;
      this.FormTitle = "编辑站点";
      this.formList.id = row.id;
      this.formList.station_name = row.station_name;
      this.formList.addr = row.addr;
    },
    // 列表编辑按钮 --确定
    editConfirmFn(val) {
      let prarms = {
        func: this.formList.id ? "setStation" : "createStation",
        token: JSON.parse(sessionStorage.getItem("userObj")).token || "",
        business: this.formList,
      };
      this.$refs[val].validate(async (valid) => {
        if (valid) {
          this.formLoading = true;
          urlObj(prarms)
            .then((res) => {
              this.listFn();
              this.$message({
                message: res.msg || "",
                type: res.code == 0 ? "success" : "error",
              });
            })
            .catch((error) => {
              this.$message({
                message: res.msg || "",
                type: "error",
              });
            });
          this.formLoading = false;
          this.isEdit = false;
        }
      });
    },
    // 列表数据
    listFn(battery_id) {
      let prarms = {
        func: "getNotBindMerchantBattery",
        token: JSON.parse(sessionStorage.getItem("userObj")).token || "",
        business: {
          battery_id: this.searchList.battery_id || "",
        },
        page_no: this.page.page,
        page_size: this.page.size,
      };
      urlObj(prarms)
        .then((res) => {
          // console.log(666, res);
          this.list = res.result;
          this.page.total = res.count || 0;
          if (res.result) {
            this.list.forEach((item) => {
              item.v = item.v ? item.v / 100 : "0";
              item.i = item.i ? item.i / 100 : "0";
              item.ah = item.ah ? item.ah / 100 : "0";
            });
          }
        })
        .catch((error) => {});
    },
    // 删除按钮
    delMethod(id) {
      this.delLoading = true;
      let prarms = {
        func: "delStation",
        token: JSON.parse(sessionStorage.getItem("userObj")).token || "",
        business: { id: id },
      };
      urlObj(prarms)
        .then((res) => {
          this.listFn();
          this.$message({
            message: res.msg || "",
            type: res.code == 0 ? "success" : "error",
          });
        })
        .catch((error) => {
          this.$message({
            message: res.msg || "",
            type: "error",
          });
        });
      this.delLoading = false;
      this.$refs[id].doClose();
    },
  },
};
</script>

<style lang="scss" scoped>
.blue {
  color: rgb(50, 62, 231);
  font-weight: 700;
}
</style>
